<template>
  <div class="flowchart-tips">
    <p v-for="item in lineTypeList" :key="item.value">
      <svg width="50" height="16" style="display: inline-block;">
        <path :d="item.path" :fill="item.color" />
      </svg>
      {{ $t(item.labelKey) }}
    </p>
  </div>
</template>

<script>
import { lineTypeList } from '@/components/e-flowchart/lines'

export default {
  name: 'EFlowchartTips',
  data() {
    return {
      lineTypeList: lineTypeList
    }
  }
}
</script>

<style scoped>
.flowchart-tips {
  padding: 0 15px;
  position: absolute;
  bottom: 11px;
  right: 11px;
}

.flowchart-tips p {
  color: #657180;
  font-size: 14px;
}
</style>
